import React from "react"
import { myList } from "../../utils/interface"
interface IProps{
    list:myList[]
    carIndex:number,
    setCarIndex:Function,
}
const ClassifyLeft:React.FC<IProps> = (props) => {
    function classTab(e: React.MouseEvent<HTMLElement, globalThis.MouseEvent>) {
        if (e.target !== e.currentTarget) {
            let num = parseInt((e.target as HTMLElement).dataset.index || '0')
            let scl = document.querySelector(".classifyRight")
            let arr = document.querySelectorAll(".classifyRight h3")
            props.setCarIndex(num)
            if (num) {
                (scl as Element).scrollTop = (arr[num] as any).offsetTop - 10
            } else {
                (scl as Element).scrollTop = 0
            }
        }
    }
    return   <section className='classifyLeft' onClick={classTab}>
         {
        props.list.map((item, index) => {
            return <div key={index} className={index === props.carIndex ? 'active' : ''} data-index={index}>
                {item.name}
            </div>
        })
    }
</section>
}
export default ClassifyLeft